<template>
  <div>
    <p style="font-size: 36px">商品管理</p>
    <el-card>
      <el-row>
        <el-select v-model="list" placeholder="请选择">
          <el-option value="productId">按商品id查询</el-option>
          <el-option value="productName">按商品名称查询</el-option>
        </el-select>
        <el-input
          style="width: 200px; margin-left: 15px"
          v-model="query"
          placeholder="关键词"
        ></el-input>
        <el-button @click="search" type="primary">查询</el-button>
        <el-button style="float: right" @click="addGoodsB">添加商品</el-button>
      </el-row>
      <!-- 表格渲染 -->
      <el-table :data="catList" stripe style="width: 100%">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="信息"></el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <p v-if="scope.row.status == '1'">在售</p>
            <p v-if="scope.row.status == '2'">下架</p>
            <el-button
              v-if="scope.row.status == '1'"
              type="danger"
              size="mini"
              @click="up(scope.row.id, scope.row.status)"
              >下架</el-button
            >
            <el-button
              v-if="scope.row.status == '2'"
              type="danger"
              size="mini"
              @click="up(scope.row.id, scope.row.status)"
              >上架</el-button
            >
            <!-- {{scope.row}} -->
          </template>
        </el-table-column>
        <!-- 编辑查看跳转 -->
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <router-link :to="'/goodsA/' + scope.row.id">查看</router-link>
            ⬅➡
            <router-link to="/goods">编辑</router-link>
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total" @num="handleCurrentChange"></pagination>
    </el-card>
  </div>
</template>

<script>
import { productList, statues, search } from "../../../util/http";
import pagination from "../../components/pagination";
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: { pagination },
  data() {
    return {
      list: "",
      query: "",
      productId: "",
      productName: "",
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
      },
      catList: [],
      total: 0,
    };
  },
  computed: {},
  watch: {},
  methods: {
    //   获取
    async getProductList() {
      const { data: res } = await productList(
        `/api/manage/product/list.do?pageNum=${this.queryInfo.pageNum}&pageSize=${this.queryInfo.pageSize}`
      );
      // console.log(res);
      if (res.status !== 0) return this.$message.error("失败");
      this.catList = res.data.list;
      this.total = res.data.total;
      this.$message.success("获取数据成功");
      // console.log(res);
    },
    //     //修改状态
    async up(id, status) {
      let s = 1;
      if (status == 1) {
        s = 2;
      } else {
        s = 1;
      }
      console.log(id, status);
      const { data: res } = await statues(
        `/api/manage/product/set_sale_status.do?productId=${id}&status=${s}`
      );
      console.log(res);
      if (res.status !== 0) return this.$message.error("修改失败");
      this.$message.success("修改状态成功");
      this.getProductList();
    },
    // 分页
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      console.log(this.queryInfo.pageNum);
      this.getProductList();
    },
    //搜索
    async search() {
      console.log(search);
      // 不能为空
      if (this.list == "") {
        return this.$message.error("请输入查询方式");
      } else {
        const { data: res } = await search(
          `/api/manage/product/search.do?listType=search&${this.list}=${this.query}`
        );
        console.log(res);
        if (res.status !== 0) return this.$message.error("查询失败");
        // 赋值到定义得catList
        this.catList = res.data.list;
        this.$message.success("查询成功");
      }
    },
    // 添加
    addGoodsB() {
      this.$router.push("/goodsB");
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.getProductList();
  },
};
</script> 
<style scoped>
</style>
